draw.js ➔ define - Code Metrics - Inspection of "[TASK] rewrite forcegraph with d3 version 4" - ffrgb/meshviewer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#75)

unknown

created 2017-03-09 17:24 UTC

draw.js ➔ define B

↳ Parent: Project

Complexity

Conditions	1
Paths	368

Size

Total Lines

120

Duplication

Lines	0
Ratio	0 %

Importance

Changes	4
Bugs	0	Features	0

Metric	Value
cc	1
c	4
b	0
f	0
nc	368
dl	0
loc	120
rs	7.1707
nop	1

9 Functions

Rating	Name	Size	Complexity
B	draw.js ➔ ... ➔ drawNode	15	5
A	draw.js ➔ ... ➔ drawHighlightNode	8	4
A	draw.js ➔ ... ➔ drawDetailNode	16	4
A	draw.js ➔ ... ➔ drawHighlightLink	11	4
A	draw.js ➔ ... ➔ setCTX	3	1
C	draw.js ➔ ... ➔ drawLink	24	12
A	draw.js ➔ ... ➔ setTransform	3	1
A	draw.js ➔ ... ➔ setHighlight	3	1
A	draw.js ➔ ... ➔ setMaxArea	4	1

How to fix Long Method

define(['helper'], function (helper) {
  var self = {};

  var ctx;
  var width;
  var height;

  var transform;

  var highlight;

  var nodeColor = '#fff';
  var clientColor = '#e6324b';

  var cableColor = '#50b0f0';
  var highlightColor = 'rgba(255, 255, 255, 0.2)';

  var labelColor = '#fff';

  var NODE_RADIUS = 15;
  var LINE_RADIUS = 12;

  function drawDetailNode(d) {
    if (transform.k > 1) {
      ctx.beginPath();
      helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
      ctx.fillStyle = clientColor;
      ctx.fill();
      ctx.beginPath();
      var name = d.o.node_id;
      if (d.o.node && d.o.node.nodeinfo) {
        name = d.o.node.nodeinfo.hostname;
      }
      ctx.textAlign = 'center';
      ctx.fillStyle = labelColor;
      ctx.fillText(name, d.x, d.y + 20);
    }
  }

  function drawHighlightNode(d) {
    if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
      ctx.fillStyle = highlightColor;
      ctx.fill();
      ctx.beginPath();
    }
  }

  function drawHighlightLink(d, to) {
    if (highlight && highlight.type === 'link' && d.o === highlight.o) {
      ctx.lineTo(to[0], to[1]);
      ctx.strokeStyle = highlightColor;
      ctx.lineWidth = LINE_RADIUS * 2;
      ctx.lineCap = 'round';
      ctx.stroke();
      to = [d.source.x, d.source.y];
    }
    return to;
  }

  self.drawNode = function drawNode(d) {
    if (d.x < transform.invertX(0) || d.y < transform.invertY(0) || transform.invertX(width) < d.x || transform.invertY(height) < d.y) {
      return;
    }
    ctx.beginPath();

    drawHighlightNode(d);

    ctx.moveTo(d.x + 3, d.y);
    ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
    ctx.fillStyle = nodeColor;
    ctx.fill();

    drawDetailNode(d);
  };

  self.drawLink = function drawLink(d) {
    var zero = transform.invert([0, 0]);
    var area = transform.invert([width, height]);
    if (d.source.x < zero[0] && d.target.x < zero[0] || d.source.y < zero[1] && d.target.y < zero[1] ||
        d.source.x > area[0] && d.target.x > area[0] || d.source.y > area[1] && d.target.y > area[1]) {
      return;
    }
    ctx.beginPath();
    ctx.moveTo(d.source.x, d.source.y);
    var to = [d.target.x, d.target.y];

    to = drawHighlightLink(d, to);

    ctx.lineTo(to[0], to[1]);
    ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
    if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
      ctx.globalAlpha = 0.2;
      ctx.lineWidth = 1.5;
    } else {
      ctx.globalAlpha = 0.8;
      ctx.lineWidth = 2.5;
    }
    ctx.stroke();
  };

  self.setCTX = function setCTX(newValue) {
    ctx = newValue;
  };

  self.setHighlight = function setHighlight(newValue) {
    highlight = newValue;
  };

  self.setTransform = function setTransform(newValue) {
    transform = newValue;
  };

  self.setMaxArea = function setMaxArea(newWidth, newHeight) {
    width = newWidth;
    height = newHeight;
  };

  return self;
});


1			define(['helper'], function (helper) {
2			var self = {};
3
4			var ctx;
5			var width;
6			var height;
7
8			var transform;
9
10			var highlight;
11
12			var nodeColor = '#fff';
13			var clientColor = '#e6324b';
14
15			var cableColor = '#50b0f0';
16			var highlightColor = 'rgba(255, 255, 255, 0.2)';
17
18			var labelColor = '#fff';
19
20			var NODE_RADIUS = 15;
21			var LINE_RADIUS = 12;
22
23			function drawDetailNode(d) {
24			if (transform.k > 1) {
25			ctx.beginPath();
26			helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
27			ctx.fillStyle = clientColor;
28			ctx.fill();
29			ctx.beginPath();
30			var name = d.o.node_id;
31			if (d.o.node && d.o.node.nodeinfo) {
32			name = d.o.node.nodeinfo.hostname;
33			}
34			ctx.textAlign = 'center';
35			ctx.fillStyle = labelColor;
36			ctx.fillText(name, d.x, d.y + 20);
37			}
38			}
39
40			function drawHighlightNode(d) {
41			if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
42			ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
43			ctx.fillStyle = highlightColor;
44			ctx.fill();
45			ctx.beginPath();
46			}
47			}
48
49			function drawHighlightLink(d, to) {
50			if (highlight && highlight.type === 'link' && d.o === highlight.o) {
51			ctx.lineTo(to[0], to[1]);
52			ctx.strokeStyle = highlightColor;
53			ctx.lineWidth = LINE_RADIUS * 2;
54			ctx.lineCap = 'round';
55			ctx.stroke();
56			to = [d.source.x, d.source.y];
57			}
58			return to;
59			}
60
61			self.drawNode = function drawNode(d) {
62			if (d.x < transform.invertX(0) \|\| d.y < transform.invertY(0) \|\| transform.invertX(width) < d.x \|\| transform.invertY(height) < d.y) {
63			return;
64			}
65			ctx.beginPath();
66
67			drawHighlightNode(d);
68
69			ctx.moveTo(d.x + 3, d.y);
70			ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
71			ctx.fillStyle = nodeColor;
72			ctx.fill();
73
74			drawDetailNode(d);
75			};
76
77			self.drawLink = function drawLink(d) {
78			var zero = transform.invert([0, 0]);
79			var area = transform.invert([width, height]);
80			if (d.source.x < zero[0] && d.target.x < zero[0] \|\| d.source.y < zero[1] && d.target.y < zero[1] \|\|
81			d.source.x > area[0] && d.target.x > area[0] \|\| d.source.y > area[1] && d.target.y > area[1]) {
82			return;
83			}
84			ctx.beginPath();
85			ctx.moveTo(d.source.x, d.source.y);
86			var to = [d.target.x, d.target.y];
87
88			to = drawHighlightLink(d, to);
89
90			ctx.lineTo(to[0], to[1]);
91			ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
92			if (d.o.type === 'fastd' \|\| d.o.type === 'L2TP') {
93			ctx.globalAlpha = 0.2;
94			ctx.lineWidth = 1.5;
95			} else {
96			ctx.globalAlpha = 0.8;
97			ctx.lineWidth = 2.5;
98			}
99			ctx.stroke();
100			};
101
102			self.setCTX = function setCTX(newValue) {
103			ctx = newValue;
104			};
105
106			self.setHighlight = function setHighlight(newValue) {
107			highlight = newValue;
108			};
109
110			self.setTransform = function setTransform(newValue) {
111			transform = newValue;
112			};
113
114			self.setMaxArea = function setMaxArea(newWidth, newHeight) {
115			width = newWidth;
116			height = newHeight;
117			};
118
119			return self;
120			});
121

ffrgb / meshviewer

Pull Request — develop (#75)

draw.js ➔ define B

Complexity

Size

Duplication

Importance

9 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like